<template>
    <div>
       <!-- 顶部滑动条 -->
       <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<!-- <div class="mui-scroll" v-for="item in cates" :key="item.id">
						<a class="mui-control-item mui-active" @click="getPhotoAllbyCategoryId(item.id)">
							{{item.title}}          有后台数据的情况下  
						</a>						
					</div> -->
                                                       
                    <div class="mui-scroll">  <!-- 没有后台数据的情况下 -->
						<a :class="['mui-control-item', item.id == 0 ? 'mui-active':'']" v-for="item in cates" :key="item.id">
							{{item.title}}
						</a>
						
					</div>
				</div>

			</div>
            <ul class="imginfo">
                <router-link v-for="item in imgList" :key="item.id" :to="'/home/PhotoInfo'+item.id"
                tag="li"> <!-- 要用tag属性 把router-link标签渲染成li标签 -->
                  <img v-lazy="item.img_url">
                  <div class="info">
                   <h1 class="info-title">{{item.title}}</h1>
                    <div class="info-body">{{item.content}}</div>
                </div>
                </router-link> 
                
            </ul>

            <!-- 图片懒加载区域 -->
            <!-- <ul>
                <li v-for="item in imgList" :key="item.id">
                <img v-lazy="item.img_url">
                </li>
            </ul> -->
    </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.min.js'
import { Toast } from 'mint-ui'


export default{
    data(){
        return {
            cates:[
                {id:0,title:'全部'},
                {id:1,title:'家居生活'},
                {id:2,title:'摄影设计'},
                {id:3,title:'明星美女'},
                {id:4,title:'电子产品'},
                {id:5,title:'英雄联盟'},
                {id:6,title:'专业狗仔'},
                {id:7,title:'梦寐以求'}
            ],     //分类的列表
            imgList:[
                {id:1,img_url:'/src/images/duola1.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:2,img_url:'/src/images/duola2.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:3,img_url:'/src/images/duola3.jpeg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:4,img_url:'/src/images/duola4.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:5,img_url:'/src/images/duola5.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:6,img_url:'/src/images/fj.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:7,img_url:'/src/images/mx.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:8,img_url:'/src/images/mx2.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
                {id:9,img_url:'/src/images/shuijiao.jpg',title:'让人梦寐以求的事情',content:'蓝胖子特价大甩买'},
               
            ]
        }
    },
    created() {
       // this.getAllCategory() // 有后台的数据需要调用
       //this.getPhotoAllbyCategoryId(0)
    },
    mounted() { //初始化DOM元素之后  触发的钩子函数
        mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
})
    },
    methods:{
        //有数据的情况下
        // getAllCategory(){
        //     this.$http.get('api/getimgcategory')
        //     .then(result =>{
        //         if(resylt.body.status === 0){
        //             result.body.message.unshift({title:'全部',id:0})
        //             this.cates = result.body.message
        //         }
        //     })
        // },
        // getPhotoAllbyCategoryId(id){
        //     this.$http.get('api/getimages/:'+id)
        //     .then(result =>{
        //         if (result.body.status === 0){
        //             imgList.result.body.message
        //         }else {
        //             Toast('加载失败···')
        //         }
        //     })
        // }
    }
        
    
}
</script>
<style lang="scss" scoped>
*{
    touch-action:pan-y;
}
.imginfo{
    list-style: none;
    padding: 0px;
    margin: 0;
    li{
        background-color: #ccc;
        width: 414px;
        height: 400px;
        margin-bottom: 10px;
        position: relative;
        img[lazy=loading] {
            width: 40px;
            height: 300px;
            margin: auto;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .info{
            position: absolute;
            bottom: 0;
            text-align: left;
            background: rgba(0,0,0,.4);
            width: 100%;
            color: white;
            .info-title{
                font-size: 30px;
            }
            .info-body{}
        }
    }
}

</style>

